import { Card, Row, Col } from 'antd';
import React, { Component, Suspense } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import { connect } from 'dva';

import styles from './style.less';

const SalesCard = React.lazy(() => import('./components/SalesCard'));
const TotalCard = React.lazy(() => import('./components/TotalCard'));
const StreetTable = React.lazy(() => import('./components/StreetTable'));
const LeaderTable = React.lazy(() => import('./components/LeaderTable'));



@connect(({ home, loading }) => ({
    home,
    loading: loading.effects['home/getHome'],
}))

// eslint-disable-next-line react/prefer-stateless-function
class Index extends Component {

    componentDidMount() {
        const { home, dispatch } = this.props

        // first
        // dispatch global data
        // dnisandsandisani
        if (home.status) {
            setTimeout(() => {
                dispatch({
                    type: 'home/getHome',
                    payload: {}
                }).then(res => {
                    // eslint-disable-next-line no-console
                    console.log(res)
                })
            }, 1500);
        }
    }

    render () {
        const { home } = this.props
        return (
            
            <GridContent style={{
                width: '90%',
                margin: '0 auto'
            }}>
                <React.Fragment>
                    <Suspense fallback={null}>
                        <TotalCard data={home.homePage.totalCard} loading={home.status}/>
                    </Suspense>
                    <Suspense fallback={null}>
                        <SalesCard
                            salesData={home.homePage.salesData}
                            rankingListData={home.homePage.rankingListData.slice(0,8)}
                            loading={home.status}
                        />
                    </Suspense>
                    <Row gutter={24} type="flex" style={{ marginTop: 24 }}>
                        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                            <Card loading={home.status}>
                                <Suspense fallback={null}>
                                    <StreetTable data={home.recordInformation.recordList}/>
                                </Suspense>
                            </Card>
                        </Col>
                        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                            <Card loading={home.status}>
                                <Suspense fallback={null}>
                                    <LeaderTable data={home.recordInformation.recordList}/>
                                </Suspense>
                            </Card>
                        </Col>
                    </Row>
                </React.Fragment>
            </GridContent>
        )
    }
}

export default Index